all
travel
photograph
people
cars
revision:
<section class="gallery_B">
<div class="container_B">
<div class="row_B">
<div class="gallery-filter">
<span class="filter-item active" data-filter="all">all</span>
<span class="filter-item" data-filter="travel">travel</span>
<span class="filter-item" data-filter="photograph">photograph</span>
<span class="filter-item" data-filter="people">people</span>
<span class="filter-item" data-filter="cars">cars</span>
</div>
</div>
<div class="row_B">
<div class="gallery-item travel">
<div class="gallery-item-inner"><img src="../images/1.jpg" alt="travel"></div>
</div>
<div class="gallery-item cars">
<div class="gallery-item-inner"><img src="../images/car1.jpg" alt="cars"></div>
</div>
<div class="gallery-item photograph">
<div class="gallery-item-inner"><img src="../images/7a.jpg" alt="photograph"></div>
</div>
<div class="gallery-item people">
<div class="gallery-item-inner"><img src="../images/tesla.jpg" alt="watch"></div>
</div>
<div class="gallery-item cars">
<div class="gallery-item-inner"><img src="../images/car4.jpg" alt="cars"> </div>
</div>
<div class="gallery-item travel">
<div class="gallery-item-inner"><img src="../images/2.jpg" alt="travel"></div>
</div>
<div class="gallery-item photograph">
<div class="gallery-item-inner"><img src="../images/10a.jpg" alt="photograph"></div>
</div>
<div class="gallery-item cars">
<div class="gallery-item-inner"><img src="../images/car3.jpg" alt="cars"></div>
</div>
<div class="gallery-item people">
<div class="gallery-item-inner"><img src="../images/tolkien.jpg" alt="people"></div>
</div>
<div class="gallery-item travel">
<div class="gallery-item-inner"><img src="../images/6.jpg" alt="travel"></div>
</div>
</div>
</div>
</section>
<style>
.container_B{max-width: 90vw; margin:auto;}
.row_B{display: flex; flex-wrap: wrap;}
.row_B .gallery-item .gallery-item-inner img{ max-width: 100%; vertical-align: middle;}
/*.gallery*/
.gallery_B{width: 100%; display: block; min-height: 100vh; background-color: #3f3e45; padding: 100px 0;}
.gallery_B .gallery-filter{padding: 0 15px; width: 100%; text-align: center; margin-bottom: 20px;}
.gallery_M .gallery-filter .filter-item{ color: #ffffff;font-size: 18px; text-transform: uppercase; display: inline-block;
margin:0 10px; cursor: pointer; border-bottom: 2px solid transparent; line-height: 1.2; transition: all 0.3s ease;}
.gallery_B .gallery-filter .filter-item.active{color: #ff9800; border-color : #ff9800;}
.gallery_B .gallery-item{width: calc(100% / 3); padding: 15px;}
.gallery_B .gallery-item-inner img{width: 100%;}
.gallery_B .gallery-item.show{ animation: fadeIn 0.5s ease;}
@keyframes fadeIn{
0%{opacity: 0; }
100%{opacity: 1;}
}
.gallery_B .gallery-item.hide{display: none;}
/*responsive*/
@media(max-width: 991px){
.gallery_B .gallery-item{width: 50%;}
}
@media(max-width: 767px){
.gallery_B .gallery-item{width: 100%;}
.gallery_B .gallery-filter .filter-item{margin-bottom: 10px;}
}
</style>
<script>
const filterContainer = document.querySelector(".gallery-filter"),
galleryItems = document.querySelectorAll(".gallery-item");
filterContainer.addEventListener("click", (event) =>{
if(event.target.classList.contains("filter-item")){
filterContainer.querySelector(".active").classList.remove("active");
event.target.classList.add("active");
const filterValue = event.target.getAttribute("data-filter");
galleryItems.forEach((item) =>{
if(item.classList.contains(filterValue) || filterValue === 'all'){
item.classList.remove("hide");
item.classList.add("show");
}
else{
item.classList.remove("show");
item.classList.add("hide");
}
});
}
});
</script>